<template>
    <div>
        <ul class="tab-bar">
            <router-link tag="li" to="/tab/category">分类</router-link>
            <router-link tag="li" to="/tab/cart">购物车</router-link>
            <router-link tag="li" to="/tab/user">用户</router-link>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: '',
        components: {

        },
        props: {

        },
        data() {
            return {

            };
        },
        methods: {

        },
        watch: {

        },
        created() {

        },
        mounted() {

        },
        computed: {

        },
    };
</script>

<style scoped lang="less">
    * {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .tab-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        display: flex;
        background-color: #fff;
        box-shadow: 0 -1px 1px rgba(100, 100, 100, .2);
        z-index: 999;
        li {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>